<template>
  <section>
    <el-row style="padding: 10px;line-height: 40px;">
      <el-col :span="4">
        <el-button type="primary" @click="dialogFormVisible= true">绑定银行卡</el-button>
      </el-col>
      <el-col :span="16"><h1>绑定的银行卡列表</h1></el-col>
      <el-dialog title="银行卡信息" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="银行名称" :label-width="formLabelWidth">
            <el-input v-model="form.bankName" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="银行卡号码" :label-width="formLabelWidth">
            <el-input v-model="form.cardNo" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="持卡人姓名" :label-width="formLabelWidth">
            <el-input v-model="form.person" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="预留手机号" :label-width="formLabelWidth">
            <el-input v-model="form.kaihuhang" auto-complete="off"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveCard">确 定</el-button>
        </div>
      </el-dialog>
    </el-row>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="bankName" label="银行名称" width="180">
      </el-table-column>
      <el-table-column prop="cardNo" label="银行卡号码" width="180">
      </el-table-column>
      <el-table-column prop="person" label="持卡人姓名">
      </el-table-column>
      <el-table-column prop="kaihuhang" label="预留手机号">
      </el-table-column>
      <el-table-column prop="status" label="状态">
      </el-table-column>
    </el-table>
  </section>
</template>

<script>
  import judgeTime from '../../../../assets/js/index.js'

  export default {
    data () {
      return {
        params: [],
        dialogFormVisible: false,
        form: {
          bankName: '',
          cardNo: '',
          person: '',
          kaihuhang: ''
        },
        formLabelWidth: '120px',
        tableData: []
      }
    },
    beforeMount () {
      this.getTableData()
    },
    methods: {
      getTableData () {
        this.$api.test().then(res => {
          this.params = res.data.list
          console.log(res)
          console.log(this.params)
          for (let i = 0; i < this.params.length; i++) {
            this.params[i].createTime = judgeTime(this.params[i].createTime)
          }
        })
      },
      saveCard () {
        this.$api.saveCard(this.form).then(res => {
          if (res.code === '000000') {
            this.$message.success('绑定成功')
            this.tableData = []
            this.dialogFormVisible = false
            this.tableData.push(this.form)
          }
        })
      }
    }

  }
</script>

<style lang="less" scoped>

</style>
